import androidx.compose.foundation.layout.*
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.material.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp

@Composable
fun AccountLoginCompose(
    accountName: String,
    accountPwd: String,
    onNameValue: (String) -> Unit,
    onPwdValue: (String) -> Unit
) {
    var pwdOff by remember { mutableStateOf(false) }
    Column(modifier = Modifier.fillMaxWidth()) {
        Spacer(modifier = Modifier.height(40.dp))
        // 用户名输入框
        OutlinedTextField(
            singleLine = true,
            modifier = Modifier.fillMaxWidth(),
            value = accountName,
            onValueChange = { onNameValue(it) },
            placeholder = {
                Text(
                    "请输入用户名", style = MaterialTheme.typography.body1,
                    color = Color(0xFF8A8F99)
                )
            },
            colors = TextFieldDefaults.outlinedTextFieldColors(
                backgroundColor = Color.White,
                unfocusedBorderColor = Color(0xFFE4E7ED),
                focusedBorderColor = Color(0xFF1BD184)
            )
        )
        Spacer(modifier = Modifier.height(40.dp))
        // 密码输入框
        OutlinedTextField(
            singleLine = true,
            modifier = Modifier.fillMaxWidth(),
            value = accountPwd,
            onValueChange = { onPwdValue(it) },
            placeholder = {
                Text(
                    "请输入密码", style = MaterialTheme.typography.body1,
                    color = Color(0xFF8A8F99)
                )
            },
            colors = TextFieldDefaults.outlinedTextFieldColors(
                backgroundColor = Color.White,
                unfocusedBorderColor = Color(0xFFE4E7ED),
                focusedBorderColor = Color(0xFF1BD184)
            ),
            visualTransformation = if (pwdOff) VisualTransformation.None else
                PasswordVisualTransformation(),
            trailingIcon = {
                IconButton(onClick = { pwdOff = !pwdOff }) {
                    Icon(
                        painter = if (pwdOff) painterResource("image/ic_password_unlock.svg")
                        else painterResource("image/ic_password_lock.svg"),
                        contentDescription = "",
                        tint = Color.Unspecified,
                        modifier = Modifier.size(30.dp)
                    )
                }
            }
        )
    }
}